<template>
    <div class="page-content">
        <div class="comm-content" ref="box"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            myEcharts: null
        }
    },
    computed:{
        themeStatus(){
            return this.$store.state.theme
        }
    },
    watch:{
        themeStatus(){
            this.myEcharts.dispose()
            this.initEcharts()
            this.getdata()
            this.screen()
        }
    },
    mounted() {
        this.initEacharts()
        this.getData()
        this.screen()
        window.addEventListener('resize',this.screen)
    },
    methods: {
        // 屏幕自适应
        screen(){
            this.myEcharts.resize()
            let width = this.$refs.box.offsetWidth
            let num = width / 100*3
            let options={
                title:{
                    textStyle:{
                        fontSizt:num
                    }
                }
            }
            this.myEcharts.setOption(options)
        },
        initEacharts() {
            let box = this.$refs.box
            this.myEcharts = this.$echarts.init(box,this.themeStatus)
            let options = {
                title: {
                    text: '主要地区农作物种植增长趋势',
                    left: 10,
                    top: 10
                },
                grid: {
                    left: "10%",
                    right: "10%",
                    top: "12%",
                    bottom: "10%"
                },
                legend: {
                    show: true,
                    icon: 'circle',
                    left: 10,
                    top: "15%"
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,  //两边留白
                },
                yAxis: {
                     type: 'value',
                    axisLine: {
                        show: true
                    }
                }
            }
            this.myEcharts.setOption(options)
        },
        async getData() {
            let dataList = await this.$http('/api/CropGrowthTrend')
            console.log(dataList)
            let monthData = dataList.data[0].content.map(item => {
                return item.month
            })
            let seriesData = dataList.data.map(item => {
                let data1 = item.content.map(item1 => {
                    return item1.area
                })
                return {
                    type: 'line',
                    name: item.city,
                    data: data1,
                    smooth: true, //是否开启平滑处理
                }
            })
            this.setEcharts(monthData, seriesData)
            // console.log(monthData,seriesData)
        },
        setEcharts(monthData, seriesData) {
            let options = {
                xAxis: {
                    data: monthData
                },
                series: seriesData
            }
            this.myEcharts.setOption(options)
        }
    },
}
</script>
<style scoped></style>